<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class='wrapper'></div>
    <script>
        /*
            2、结构复⽤
            comment：复用了点赞按钮
            todo: 页面已经有2个点赞按钮了，如何加上点击事件？？?
        */
        class LikeButton {
            render() {
                return `
                <button id='like-btn'> 
                    <span class='like-text'>
                        赞
                    </span> 
                    <span>👍</span> 
                </button> 
                `
            }
        }
        const wrapper = document.querySelector('.wrapper')
        const likeButton1 = new LikeButton()
        wrapper.innerHTML = likeButton1.render()
        const likeButton2 = new LikeButton()
        wrapper.innerHTML += likeButton2.render()
    </script>
</body>

</html>